<template>
    <div class="row items-center" style="gap: 10px">
        <template v-for="(item, index) in conf.color">
            <input type="color" v-model="conf.color[index].value" />
        </template>
    </div>
</template>

<script lang="ts" setup>
import { Scope } from 'tools-vue3'
import { reactive, watch } from 'vue'

const props = defineProps({
    colors: { default: [] },
    length: { default: 6 }
})

const emit = defineEmits(['update:colors'])

const conf = reactive({
    color: [] as any[]
})

for (let i = 0; i < props.length; i++) {
    conf.color.push({ value: '#000000' })
}

const updateColor = () =>
    emit(
        'update:colors',
        conf.color.map((_item) => _item.value)
    )
updateColor()
const timer = Scope.Timer()
let ctimer = null as any
watch(
    () => conf.color,
    () => {
        timer.un(ctimer)
        ctimer = timer.once(() => {
            updateColor()
        }, 100)
    },
    { deep: true }
)
</script>
<style lang="less" scoped></style>
